import React from 'react'

// 这里仅仅是展示，如果需要动态更新则需要写到 this.state 里面
const user = {
    name: 'ionluo',
    gender: 1,
    imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
}

// 函数组件，JSXBaseDemo则是class组件
function MyButton() {
    return (
      <button>确定</button>
    );
}

class JSXBaseDemo extends React.Component {
    // constructor(props) {
    //     super(props)
    //     this.state = {}
    // }
    render() {
        const styleData = {color: 'blue'}
        const rawHtml = '个人简介4: <i>xxxxxxxxxxxx</i>'

        return <div>
            <h3>JSX基础用法</h3>
            {/* 获取变量 */}
            <p>姓名：{user.name}</p>
            {/* 表达式 */}
            <p>性别：{user.gender ? '男' : '女'}</p>
            {/* 属性设置 */}
            <p>头像：<img src={user.imgUrl} alt="" width='100px'/></p>
            {/* class属性设置 */}
            <p className='description'>个人简介1: xxxxxxxxxxxx</p>
            {/* style属性设置（对象写法） */}
            <p style={styleData}>个人简介2: xxxxxxxxxxxx</p>
            {/* style属性设置（行内写法） */}
            <p style={{ color: "red" }}>个人简介3: xxxxxxxxxxxx</p>
            {/* 原生HTML（注意，必须先构造成 {__html： ''} 的格式） */}
            <p dangerouslySetInnerHTML={{__html: rawHtml}}></p>
            {/* 加载组件 */}
            <MyButton/>
        </div>

    }
}

export default JSXBaseDemo